<template>
    <div class="setComponent">
        <el-radio-group size="mini" v-model="radio">
            <el-radio-button label="静态数据"/>
            <el-radio-button label="动态数据"/>
        </el-radio-group>
        <div v-if="radio=='静态数据'">
            <div class="form-item">
                <label>标题</label>
                <el-button size="mini" @click="titleClick('title')">编辑</el-button>
            </div>
            <div>
                <div class="form-item">
                    <label>描述</label>
                    <el-button size="mini" @click="titleClick('desc')">编辑</el-button>
                </div>
            </div>
            <div class="form-item">
                <label>图片</label>
                <el-button size="small" type="primary" @click="uploadClick">上传图片</el-button>
            </div>
        </div>
        <div v-if="radio=='动态数据'">
            <div class="form-item">
                <label>参数类型</label>
            </div>
            <el-radio-group size="mini" v-model="obj.queryType">
                <el-radio-button label="body"/>
                <el-radio-button label="query"/>
            </el-radio-group>
            <div class="form-item">
                <label>请求方式</label>
            </div>
            <el-radio-group size="mini" v-model="obj.method">
                <el-radio-button label="post"/>
                <el-radio-button label="get"/>
            </el-radio-group>
            <div class="form-item">
                <label>标题属性绑定</label>
                <input type="text" v-model="obj.titleKey">
            </div>
            <div class="form-item">
                <label>描述属性绑定</label>
                <input type="text" v-model="obj.descKey">
            </div>
            <div class="form-item">
                <label>图片属性绑定</label>
                <input type="text" v-model="obj.imageKey">
            </div>
            <div class="form-item">
                <label>接口地址</label>
                <el-input type="text" v-model="obj.url"/>
            </div>
            <div class="form-item">
                <label>接口参数</label>
                <el-input type="textarea" v-model="obj.params"/>
            </div>
            <el-button @click="submit">提交</el-button>
        </div>
        <div class="form-item">
            <label>卡片列数</label>
            <el-select v-model="obj.columns" clearable placeholder="请选择">
                <el-option
                    v-for="item in columnOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
            </el-select>
        </div>
        <div class="form-item">
            <el-tooltip class="item" effect="dark" content="更适用于多列布局" placement="top-start">
                <label>卡片左右间隔 <i style="color:#ccc;" class="el-icon-info"/></label>
            </el-tooltip>
            <el-slider v-model="obj.gutter" :min="0" :max="200"/>
        </div>
        <div class="form-item">
            <label>增加卡片</label>
            <el-button type="primary" round size="mini" @click="addClick">增加</el-button>
        </div>
        <div class="form-item">
            <label>删除卡片</label>
            <el-button type="danger" round size="mini" @click="removeClick">删除</el-button>
        </div>

        <div class="form-item">
            <label>图片动画</label>
            <el-select v-model="obj.animateImg" clearable placeholder="请选择">
                <el-option-group
                    v-for="(group,i) in options"
                    :key="i"
                    :label="group.label">
                    <el-option
                        v-for="(item,itemIndex) in group.options"
                        :key="itemIndex"
                        :label="item.label"
                        :value="item.value"/>
                </el-option-group>
            </el-select>
        </div>
        <div class="form-item">
            <label>主标题文字动画</label>
            <el-select v-model="obj.animateTitle" clearable placeholder="请选择">
                <el-option-group
                    v-for="(group,i) in options"
                    :key="i"
                    :label="group.label">
                    <el-option
                        v-for="(item,itemIndex) in group.options"
                        :key="itemIndex"
                        :label="item.label"
                        :value="item.value"/>
                </el-option-group>
            </el-select>
        </div>
        <div class="form-item">
            <label>副标题文字动画</label>
            <el-select v-model="obj.animateText" clearable placeholder="请选择">
                <el-option-group
                    v-for="(group,i) in options"
                    :key="i"
                    :label="group.label">
                    <el-option
                        v-for="(item,itemIndex) in group.options"
                        :key="itemIndex"
                        :label="item.label"
                        :value="item.value"/>
                </el-option-group>
            </el-select>
        </div>
    </div>
</template>
<script>
import { animateOptions } from '@/utils/animateOptions'
import { columnOptions } from '@/utils/selectOptions'
import { fmRequest } from '@/api/api'
import { getFmParam } from '@/common/utils/index'
export default {
    name: 'ThreeColumns',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            options: animateOptions,
            columnOptions: columnOptions,
            radio: '静态数据'
        }
    },
    methods: {
        butClick(msg) {
            this.$emit('butClick', msg)
        },
        uploadClick() {
            this.$emit('uploadClick', this.obj)
        },
        addClick() {
            this.obj.imgTextBox.push(JSON.parse(JSON.stringify(this.obj.imgTextBox[0])))
        },
        removeClick() {
            this.obj.imgTextBox.pop()
        },
        titleClick(type) {
            this.$emit('titleClick', [this.obj, type])
        },
        submit() {
            // Axios.post(this.obj.url, this.obj.params)
            console.log(this.obj.params)
            // cardformInitData(JSON.parse(this.obj.params))
            const params = getFmParam(this.obj.params, this.$route.query)
            this.$set(this.obj, 'params', params)
            fmRequest(this.obj.url, this.obj.method, this.obj.queryType, params)
                .then(res => {
                    console.log(res)
                    var data = res.rows
                    data.forEach(element => {
                        element.title = element[this.obj.titleKey]
                        element.imgUrl = element[this.obj.imageKey]
                        element.desc = element[this.obj.descKey]
                    })
                    this.$set(this.obj, 'imgTextBoxCopy', data)
                    this.$set(this.obj, 'version', this.obj.version++)
                }).catch(err => {
                    console.log(err)
                })

            console.log(this.obj)
        }
    }
}
</script>
<style lang="scss">

</style>

